window.onload = function() {
    // $(function() {
    //     getId()
    //     loadProduct()
    //         // var goback = document.querySelector('.goBack')
    //         // var sliderbar = document.querySelector('.return1')
    //         // document.addEventListener('scroll', function() {
    //         //     if (window.pageYOffset >= 1200) {
    //         //         goback.style.display = 'block'
    //         //     } else {
    //         //         goback.style.display = 'none'
    //         //     }
    //         // })
    //         // goback.addEventListener('click', function() {
    //         //     // window.scroll(0, 100)
    //         //     animate(window, 0)
    //         // });


    // })
    // let userList = []
    //     // 获取商品ID
    // function getId() {
    //     console.log(location.href);
    //     let url = location.href
    //     let index = url.indexOf('?')
    //     let subUrl = url.substring(index + 1)
    //     let id = subUrl.split('=')[1]
    //     return id
    // }

    // function loadProduct() {
    //     let id = getId()
    //     $.ajax({
    //         url: 'http://www.xiongmaoyouxuan.com/api/detail',
    //         type: 'get',
    //         data: {
    //             id
    //         },
    //         success: function(data) {
    //             console.log(data);
    //             showDetail(data.data.detail)
    //         }
    //     })
    // }

    var str = ''

    function showDetail() {
        // var num = localStorage.getItem(currentUser + 'num')
        // var img = localStorage.getItem(currentUser + 'img')
        // var shopTitle = localStorage.getItem(currentUser + 'shopTitle')
        // var price = localStorage.getItem(currentUser + 'price')
        // for (let i = 0; i < num; i++) {
        //     imgnow = Number(img) + i
        //     shopTitlenow = Number(shopTitle) + i
        //     pricenow = Number(price) + i
        // }
        // console.log(localStorage.getItem(currentUser + 'num'));
        $(function() {
            cart()
        })
        var currentUser = localStorage.getItem('currentUser')
        console.log(Number(localStorage.getItem(currentUser + 'num')));

        for (var i = 1; i <= Number(localStorage.getItem(currentUser + 'num')); i++) {
            // var sum = i
            // localStorage.setItem(sum, i)
            var imgg = localStorage.getItem(currentUser + 'img' + i)
            var Titlee = localStorage.getItem(currentUser + 'shopTitle' + i)
            var pricee = localStorage.getItem(currentUser + 'price' + i)
                // console.log(imgg);
            let Str1 = `
        <tr class="cart-item">
                        <td>
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </td>
                        <td><img src="${imgg}" alt="shop06" width="50" height="74"></td>
                        <td>${Titlee}</td>
                        <td class="p-price">￥${pricee}</td>
                        <td><input type="button" name="minus" value="-" class="decrement"><input type="text" name="amount" value="1" class="itxt"><input type="button" name="plus" value="+" class="increment"></td>
                        <td class="singleprice p-sum" width="100px">￥${pricee}</td>
                        <td><a href="#">移入收藏</a><br><a class="delete-btn" href="javascript:;">删除</a></td>
                    </tr>`
            str += Str1

            // localStorage.getItem(currentUser + 'img' + i)
            // localStorage.getItem(currentUser + 'shopTitle' + i)
            // localStorage.getItem(currentUser + 'price' + i)
        }

        function cart() {
            $(".checkall").change(function() {
                console.log($(this).prop("checked"));
                $(".j-checkbox ,.checkall").prop("checked", $(this).prop("checked"))
                if ($(this).prop("checked")) {
                    $(".cart-item").addClass("check")
                } else {
                    $(".cart-item").removeClass("check")
                }
            })
            $(".j-checkbox").change(function() {
                if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
                    $(".checkall").prop("checked", true)
                } else {
                    $(".checkall").prop("checked", false)
                }
                if ($(this).prop("checked")) {
                    $(this).parent().parent().addClass("check")
                } else {
                    $(this).parent().parent().removeClass("check")
                }
            })
            $(".decrement").click(function() {
                var n = $(this).siblings(".itxt").val()
                if (n == 1) {
                    return false
                }
                n--
                $(this).siblings(".itxt").val(n)
                var p = $(this).parent().siblings(".p-price").html()
                p = p.substr(1)
                var sum = (p * n).toFixed(2)
                $(this).parent().siblings(".p-sum").html("¥" + sum)
                getSum()
            })
            $(".increment").click(function() {
                var n = $(this).siblings(".itxt").val()
                n++
                $(this).siblings(".itxt").val(n)
                var p = $(this).parent().siblings(".p-price").html()
                p = p.substr(1)
                var sum = (p * n).toFixed(2)
                $(this).parent().siblings(".p-sum").html("¥" + sum)
                getSum()
            })
            $(".itxt").change(function() {
                var n = $(this).val()
                var p = $(this).parent().siblings(".p-price").html()
                p = p.substr(1)
                var sum = (p * n).toFixed(2)
                $(this).parent().siblings(".p-sum").html("¥" + sum)
                getSum()
            })
            getSum()

            function getSum() {
                var count = 0
                var money = 0
                $(".itxt").each(function(i, ele) {
                    count += parseInt($(ele).val())
                })
                $(".amount-sum em").text(count)
                $(".p-sum").each(function(i, ele) {
                    money += parseFloat($(ele).text().substr(1))
                })
                $(".price-sum em").text("¥" + money.toFixed(2))
            }
            $(".delete-btn").click(function() {
                $(this).parent().parent().remove()
                    // var index = Number(document.querySelector('.index').innerHTML)
                    // console.log(index);
                    // console.log(localStorage.getItem(index));
                    // console.log(localStorage.removeItem(currentUser + 'img' + index));
                    // console.log(localStorage.removeItem(currentUser + 'shopTitle' + index));
                    // console.log(localStorage.removeItem(currentUser + 'price' + index));
                getSum()
            })
            $(".remove-batch").click(function() {
                $(".j-checkbox:checked").parent().parent().remove()
                getSum()
            })
            $(".clear-all").click(function() {
                $(".cart-item").remove()
                getSum()
            })
        }
        document.querySelector('.join').innerHTML = str


        // console.log(localStorage.getItem(currentUser + 'shopTitle' + i));
        // console.log(localStorage.getItem(currentUser + 'price' + i));
        // // console.log(localStorage.getItem(currentUser + 'num'));
        // let Str1 = `
        //     <tr class="cart-item">
        //                     <td>
        //                         <input type="checkbox" name="" id="" class="j-checkbox">
        //                     </td>
        //                     <td><img src="${imgnow}" alt="shop06" width="50" height="74"></td>
        //                     <td>${userList.shop.title}</td>
        //                     <td class="p-price">￥${userList.price}</td>
        //                     <td><input type="button" name="minus" value="-" class="decrement"><input type="text" name="amount" value="1" class="itxt"><input type="button" name="plus" value="+" class="increment"></td>
        //                     <td class="singleprice p-sum" width="100px">￥${userList.price}</td>
        //                     <td><a href="#">移入收藏</a><br><a class="delete-btn" href="#">删除</a></td>
        //                 </tr>`
        // str += Str1
        /**
         * 数量加一操作
         */
        function onPlus() {
            var plusEles = document.querySelectorAll('input[name="plus"]')
            for (var i = 0; i < plusEles.length; i++) {
                //加按钮绑定点击事件
                plusEles[i].onclick = function() {
                    //1.数量加一
                    //获取数量amount元素节点
                    //this表示当前对象，在此处表示当前点击的加号
                    var amountEle = this.previousElementSibling
                    var num = amountEle.value //获取数量值
                    num++ //加一
                    amountEle.value = num //设置数量给元素节点

                    //2.改变单个商品总价
                    //2.1获取单个商品价格
                    var priceEle = this.parentElement.previousElementSibling
                    var price = priceEle.innerHTML
                    price = price.substring(1)
                        //类型转换字符串->数值 string->number
                        // price = Number(price)
                        // console.log(typeof price)
                        //2.2 单价*数量=单个商品总价
                    var totalPrice = price * num //隐式转换
                        // 2.3 赋值给单个商品总价
                    var totalPriceEle = this.parentElement.nextElementSibling
                    totalPriceEle.innerHTML = '￥' + totalPrice.toFixed(2)

                    //3.恢复减号操作
                    var minusBtn = this.previousElementSibling.previousElementSibling
                    minusBtn.removeAttribute('disabled')

                    //4.重新计算总价
                    allTotalPrice()
                }
            }
        }
        /**
         * 数量减一
         */
        function onMinus() {
            //1. 获取所有减按钮
            var minusEles = document.querySelectorAll('input[name="minus"]')
                //2.遍历所有减按钮,绑定事件
            for (var i = 0; i < minusEles.length; i++) {
                minusEles[i].onclick = function() {
                    //3. 获取数量amount元素节点
                    //this表示当前对象，此处表示当前点击的减号元素节点
                    var amountEle = this.nextElementSibling
                    var num = amountEle.value
                        //4.边界处理 num不能小于0
                    if (--num < 0) {
                        num = 0
                        this.setAttribute('disabled', true)
                    }
                    // 5. 将改变后的数量写回input输入框显示
                    amountEle.value = num

                    // 6. 单个商品总价改变
                    // 6.1 单个商品价格
                    var priceEle = this.parentElement.previousElementSibling
                    var price = priceEle.innerHTML
                    price = price.substring(1)
                    console.log(price)
                        //6.2 单价*数量=单个商品总价
                    var totalPrice = price * num //隐式转换
                        // 6.3 赋值给单个商品总价
                    var totalPriceEle = this.parentElement.nextElementSibling
                    totalPriceEle.innerHTML = '￥' + totalPrice.toFixed(2)

                    //4.重新计算总价
                    allTotalPrice()
                }
            }
        }

        /**
         * 计算所有商品总价
         *  思路:
         *    1. 遍历所有商品
         *    2. 获取单个商品总价格
         *    3. 累加求和
         */
        function allTotalPrice() {
            var singleprices = document.querySelectorAll('.singleprice')
            var sum = 0
            for (var i = 0; i < singleprices.length; i++) {
                var singlePrice = singleprices[i].innerHTML
                singlePrice = singlePrice.substring(1)
                    // 类型转换
                singlePrice = Number(singlePrice)
                sum += singlePrice
            }

            var totalPriceEle = document.querySelector('#totalPrice')
                // totalPriceEle.innerHTML = `￥${sum.toFixed(2)}`
        }



        function addTrels() {
            var bookName = document.querySelector('[name="bookname"]')
            var bookPrice = document.querySelector('[name="bookprice"]')
            var bookPicture = document.querySelector('[name="bookpicture"]')
            var tableObj = document.querySelector('table')
            var newTr = document.createElement('tr')
            var newTd = document.createElement('td')
            var newImg = document.createElement('img')
            newTd.appendChild(newImg)
            newImg.setAttribute('src', bookPicture.value)
            newImg.setAttribute('width', '57px')
            newImg.setAttribute('height', '74px')

            var newTd1 = document.createElement('td')

            newTd1.appendChild(document.createTextNode(bookName.value))

            var newTd2 = document.createElement('td')
            newTd2.appendChild(bookPrice.value)

            var inputObj1 = document.createElement('input')
            var inputObj2 = document.createElement('input')
            var inputObj3 = document.createElement('input')
            inputObj1.setAttribute('type', 'button')
            inputObj1.setAttribute('value', '-')
            inputObj1.setAttribute('name', 'minus')

            inputObj2.setAttribute('type', 'button')
            inputObj2.setAttribute('value', '0')
            inputObj2.setAttribute('name', 'amount')

            inputObj3.setAttribute('type', 'button')
            inputObj3.setAttribute('value', '+')
            inputObj3.setAttribute('name', 'plus')

            var newTd3 = document.createElement('td')
            newTd3.appendChild(inputObj1)
            newTd3.appendChild(inputObj2)
            newTd3.appendChild(inputObj3)

            var newTd4 = document.createElement('td')
            var newTd4Txt = document.createTextNode('￥0')
            newTd4.setAttribute('class', 'singleprice')
            newTd4.setAttribute('width', '100px')
            newTd4.appendChild(newTd4Txt)

            var newTd5 = document.createElement('td')
            var newA1 = document.createElement('a')
            var newA2 = document.createElement('a')
            var Atxt1 = document.createTextNode('移入收藏')
            var Atxt2 = document.createTextNode('删除')
            newA1.appendChild(Atxt1)
            newA2.appendChild(Atxt2)
            newTd5.appendChild(newA1)
            newTd5.appendChild(newA2)

            newTr.appendChild(newTd)
            newTr.appendChild(newTd1)
            newTr.appendChild(newTd2)
            newTr.appendChild(newTd3)
            newTr.appendChild(newTd4)
            newTr.appendChild(newTd5)

            tableObj.appendChild(newTr)
        }
        // addTrels()

        /**
         * 添加商品
         *   问题:表单提交时,会执行默认action动作,跳转到其它页面,如果没有指定其它页面，则会刷新当前页面
         *   解决: button按钮改变成普通按钮不会触发action动作,
         *       type="button"
         *
         */
        function addProduct() {
            var addBtn = document.querySelector('#addbookbtn')
            var tableEle = document.querySelector('table')

            //         addBtn.onclick = function() {
            //             //0.获取表单内容
            //             var inputNameEle = document.querySelector('input[name="bookname"]')
            //             var inputPriceEle = document.querySelector('input[name="bookprice"]')
            //             var inputPictureEle = document.querySelector('input[name="bookpicture"]')
            //             var bookName = inputNameEle.value
            //             var bookPrice = inputPriceEle.value
            //             var bookPicture = inputPictureEle.value

            //             //1.创建商品项
            //             var trStr = `
            //     <td><img src="${bookPicture}" alt="book22" width="57" height="74"></td>
            //     <td>${bookName}</td>
            //     <td>￥${bookPrice}</td>
            //     <td><input type="button" name="minus" value="-"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+"></td>
            //     <td class="singleprice" width="100px">￥0</td>
            //     <td><a href="#">移入收藏</a><br><a href="#" class="delete-btn">删除</a></td>
            // `
            //                 //1.1创建tr商品项节点
            //             var trEle = document.createElement('tr')
            //                 //1.2将strStr字符串作为内容赋值给tr节点
            //             trEle.innerHTML = trStr
            //                 //2.添加商品项节点到table
            //             tableEle.appendChild(trEle)

            //             //3.清除表单内容
            //             inputNameEle.value = ''
            //             inputPriceEle.value = ''
            //             inputPictureEle.value = ''

            //             //4.给新增加的商品项重新绑定删除事件
            //             deleteProduct()
            //             onMinus()
            //             onPlus()
            //         }
        }

        /**
         * 删除商品
         */
        function deleteProduct() {
            //1.获取所有删除按钮
            var deleteBtns = document.querySelectorAll('.delete-btn')
                //2.遍历所有删除按钮，绑定删除事件
            for (var i = 0; i < deleteBtns.length; i++) {
                deleteBtns[i].onclick = function() {
                    this.parentElement.parentElement.remove()
                }
            }
        }



    }
    showDetail()


}